<template lang="pug">
  section
    Form(inline,:label-width='70').database-header
      FormItem(label='导出时间')
        DatePicker(placeholder='开始时间',format="yyyy年MM月dd日",v-model='startTime',@on-open-change="handleSetDateReadonly")
        span(style='margin:0 5px') -
        DatePicker(placeholder='结束时间',format="yyyy年MM月dd日",v-model='endTime',@on-open-change="handleSetDateReadonly")
      Button(type='primary',@click='handleUpdateTableData()') 查询
      Button(style='margin-left:10px',@click='handleReset') 重置
    show-table(ref='tab',:total='total',:current='current',:columns='columns',:data='tabData',@handleChangePage='handleChangePage')
</template>

<script>
import asyncDatabase from '../../api'
import showTable from '@/components/show-table/show-table'

export default {
  name: 'Exported',
  components: { showTable },
  data() {
    return {
      startTime: '',
      endTime: '',
      total: 0,
      current: 1,
      tabData: [],
      columns: [
        {
          width: 60,
          align: 'center',
          title: '序号',
          key: 'id'
        },
        {
          title: '文件名',
          align: 'center',
          render: (h, params) => {
            return h('Tooltip', { attrs: { placement: 'top', content: `${params.row.fileName}` } }, params.row.fileName)
          }
        },
        {
          title: '路径',
          align: 'center',
          key: 'filePath'
        },
        {
          title: '导出时间',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.exportTime)
          }
        }
      ],
      dynamiColumns: [
        {
          title: '操作',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              {
                style: { color: '#2d8cf0', cursor: 'pointer' },
                on: {
                  click: () => {
                    location.href = `${process.env.VUE_APP_BASE_API}/data/downloadHistory/download?token=${this.$cookie.get('token')}&id=${params.row.id}`
                  }
                }
              },
              '下载'
            )
          }
        }
      ]
    }
  },
  mounted() {
    if (this.$route.meta['导出记录']['/data/downloadHistory/download']) this.columns = [...this.columns, ...this.dynamiColumns]
    this.handleExportTableData()
  },
  methods: {
    handleReset() {
      this.startTime = this.endTime = ''
      this.handleExportTableData()
    },
    handleChangePage(pageSub) {
      this.handleUpdateTableData(pageSub)
    },
    handleUpdateTableData(current = 1) {
      this.current = current
      if (this.startTime > this.endTime) {
        this.$Message.warning('结束时间不得少于开始时间')
        return
      }
      this.handleExportTableData()
    },
    handleExportTableData: async function() {
      try {
        this.total = 0
        this.tabData = []
        this.$refs.tab.loading = true
        const res = await asyncDatabase.downloadList({
          params: {
            startTime: this.startTime === '' ? '' : +this.$dayjs(this.startTime),
            endTime: this.endTime === '' ? '' : +this.$dayjs(this.endTime)
          }
        })
        this.tabData = res.data.data
        this.$refs.tab.loading = false
      } catch (error) {
        this.$refs.tab.loading = false
      }
    },
    handleSetDateReadonly() {
      document.querySelectorAll('.database-header .ivu-input')[0].setAttribute('readonly', true)
      document.querySelectorAll('.database-header .ivu-input')[1].setAttribute('readonly', true)
    }
  }
}
</script>
